<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录|白酒文化宣传网站</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        a{
            color: inherit;
            text-decoration: none;
        }
        body{
            background:url('https://pic.52112.com/180529/JPG-180529_278/sbhfDYKipt_small.jpg') no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }
        .login{
            position: relative;
            height: 500px;
            width: 900px;
            margin: 300px auto 0;
            border-radius: 20px;
        }
        .login .login1{
            position: absolute;
            height: 500px;
            width: 450px;
            background-color: white;
            left: 25%;
            opacity: .6;
            /* border: 1px solid red; */
            transition: .6s;
        }
        .login .login1 h1 span{
            position: absolute;
            left: 45%;
            top: 5%;
            font-size: 34px;
        }
        .login .login1 ul li{
            height: 60px;
            background-color: rgba(240, 248, 255, 0.95);
        }
        .login .login1 ul li input{
            height: 50px;
            width: 300px;
        }
        .login .login1 ul li select{
            height: 40px;
            width: 200px;
        }
        .login .login1 ul li:nth-child(1){
            position: absolute;
            left: 15%;
            top: 20%;
        }
        .login .login1 ul li:nth-child(2){
            position: absolute;
            left: 15%;
            top: 35%;
        }
        .login .login1 ul li:nth-child(3){
            position: absolute;
            left: 15%;
            top: 48%;
        }
        .login .login1 ul li:nth-child(4){
            position: absolute;
            left: 15%;
            top: 58%;
        }
        .login .login1 ul li:nth-child(5){
            position: absolute;
            left: 38%;
            top: 75%;
        }
        .login .login1 ul li:nth-child(4) input{
            height: 50px;
            width: 180px;
        }
        .login .login1 ul li:nth-child(5) input{
            height: 50px;
            width: 140px;
            background-color: rgba(128, 128, 128, 0.863);
            border-radius: 20px;
            font-size: 25px;
            color: white;
            font-family: '宋体';
        }
        @font-face {
            font-family: "花体";
            src: url('../../front/逐浪花体.otf');
        }
        @font-face {
            font-family: "宋体";
            src: url(../../front/苏新诗央行体.ttf);
        }
    </style>
</head>
<body>
    <div class="login">
        <div class="login1">
            <h1><span>登录</span></h1>
            <form action="">
                <ul>
                    <li><input type="text" name="account" value="用户名："></li>
                    <li>
                        <input type="password" name="pwd" value="" placeholder="请输入密码">
                    </li>
                    <li>
                        <select name="group" id="">
                            <option value="">用户</option>
                            <option value="">管理员</option>
                        </select>
                    </li>
                    <li><input type="text" name="captcha" value="验证码："></li>
                    <li class="on"><input type="submit" value="登录"></li>
                </ul>
            </form>
        </div>
        <!-- <div class="login2">
            <input type="submit" value="注册">
        </div> -->
    </div>
    <script>
        let conversion = document.querySelector(".login"),
            aLogin = document.querySelectorAll(".login .login1 ul li"),
            trigger = document.querySelector(".login .login2 input"),
            loginOne = document.querySelector(".login .login1"),
            loginTwo = document.querySelector(".login .login2");
        trigger.onclick = function(){
            window.location.replace("../酒类文化宣传/注册界面.html")
        }
    </script>
</body>
</html>